<template>
  <div>
    <div class="page-header">
      <el-page-header @back="goBack" content="VIDEO" ></el-page-header>
    </div>
    
    <div class="video-container">
      
      <div class="video">
        <div class="video-title">{{this.$route.query.title}}</div>
        <video :src="this.$route.query.url" controls="controls"></video>
      </div>
      <div class="svg-grid">
        <svg
          t="1617026901887"
          class="virusIcon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1933"
          width="200"
          height="200"
        >
          <path
            d="M518.827 448.853c0 76.8-63.147 139.947-139.947 139.947s-139.947-63.147-139.947-139.947c0-76.8 63.147-139.947 139.947-139.947 76.8-1.707 139.947 61.44 139.947 139.947z m201.386-6.826c-40.96 0-73.387 32.427-71.68 73.387 0 40.96 32.427 73.387 73.387 73.387s73.387-32.427 73.387-73.387c-1.707-40.96-34.133-73.387-75.093-73.387z m-179.2 201.386c-35.84 0-69.973 22.187-83.627 54.613-13.653 34.133-6.827 73.387 18.773 98.987s64.853 34.133 98.987 20.48c34.133-13.653 56.32-46.08 56.32-83.627 0-23.893-10.24-46.08-25.6-63.147-18.773-18.773-40.96-27.307-64.853-27.307z m116.054-322.56c0-13.653-11.947-25.6-25.6-25.6s-25.6 10.24-25.6 25.6c0 13.653 10.24 25.6 23.893 25.6 15.36 0 25.6-11.947 27.307-25.6z m-327.68 397.654c-11.947 0-23.893 6.827-27.307 18.773-5.12 11.947-1.707 23.893 6.827 32.427s22.187 11.947 32.427 6.827c11.947-5.12 18.773-15.36 18.773-27.307 0-8.533-3.413-15.36-8.533-20.48-6.827-8.533-13.653-10.24-22.187-10.24z m102.4-494.934c11.947 0 20.48-10.24 20.48-20.48 0-11.947-8.533-20.48-20.48-20.48s-20.48 8.533-20.48 20.48c0 5.12 1.707 10.24 5.12 13.653 5.12 5.12 10.24 6.827 15.36 6.827z m547.84 249.174c15.36 0 30.72 6.827 37.547 20.48 8.533 13.653 8.533 29.013 0 42.667s-22.187 20.48-37.547 20.48h-44.373c-3.413 42.667-13.653 83.627-30.72 122.88l49.493 29.013h1.707c18.773 11.947 23.893 35.84 13.653 56.32-11.947 18.773-35.84 25.6-54.613 15.36h-1.707L865.28 752.64c-23.893 35.84-54.613 68.267-88.747 95.573l30.72 52.907c11.947 20.48 5.12 44.373-15.36 56.32s-44.373 5.12-56.32-15.36l-29.013-49.493c-49.493 25.6-104.107 42.667-160.427 46.08v44.373c-1.707 22.187-18.773 39.253-40.96 39.253s-39.253-17.067-40.96-39.253v-44.373c-54.613-5.12-107.52-22.187-155.307-47.787l-29.013 51.2c-11.947 20.48-37.547 27.307-56.32 15.36-20.48-11.947-27.307-37.547-15.36-56.32l32.427-56.32c-34.133-27.307-63.147-61.44-87.04-97.28l-47.787 29.013c-11.947 8.533-29.013 8.533-40.96 1.707-13.653-6.827-22.187-22.187-22.187-35.84 0-15.36 8.533-29.013 22.187-35.84l51.2-29.013c-15.36-39.253-25.6-78.507-29.013-121.173H39.253C17.066 554.667 0 535.894 0 513.707s17.067-40.96 39.253-40.96h46.08c5.12-46.08 17.067-90.453 35.84-131.413l-46.08-27.307c-13.653-6.827-22.187-20.48-22.187-35.84s8.533-29.013 22.187-35.84c13.653-6.827 29.013-6.827 42.667 1.707l46.08 27.307c27.307-39.253 63.147-75.093 102.4-102.4l-29.013-49.493c-8.533-11.947-8.533-29.013-1.707-42.667s22.187-22.187 35.84-22.187c15.36 0 29.013 8.533 35.84 22.187l27.307 47.787c40.96-18.773 85.333-30.72 129.707-35.84v-46.08c0-22.187 18.773-40.96 40.96-40.96s40.96 18.773 40.96 40.96v46.08c47.787 3.413 95.573 17.067 138.24 35.84l27.307-47.787v-1.707c6.827-13.653 20.48-22.187 35.84-22.187s29.013 8.533 35.84 22.187c11.947 15.36 10.24 30.72 1.707 44.373l-27.307 47.787c40.96 29.013 75.093 64.853 104.107 105.813l52.907-30.72h1.707c20.48-11.947 44.373-5.12 56.32 15.36s5.12 44.373-15.36 56.32h-1.707l-52.907 30.72c17.067 40.96 29.013 83.627 32.427 128h44.373zM512 894.293c180.907 0 336.213-126.293 372.053-303.787s-58.027-354.987-223.573-424.96c-165.547-69.973-358.4-13.653-460.8 134.827l-29.013 49.493c-56.32 117.76-47.787 256 22.187 365.227 68.267 110.933 187.733 179.2 319.147 179.2z"
            fill="#1296db"
            p-id="1934"
          />
        </svg>
        <svg
          t="1617030643746"
          class="needleIcon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="6978"
          width="200"
          height="200"
        >
          <path
            d="M212.5 820c-2.7 0-5.3-1-7.4-3-4.1-4.1-4.1-10.7 0-14.7l112.5-112.5c4.1-4.1 10.7-4.1 14.7 0 4.1 4.1 4.1 10.7 0 14.7L219.9 817c-2.1 2-4.7 3-7.4 3zM490.29 441.417l14.707-14.708 89.519 89.52-14.708 14.707z"
            fill="#FE5862"
            p-id="6979"
          />
          <path
            d="M462.203 539.466l70.428-70.427 19.657 19.658-70.427 70.427z"
            fill="#FE5862"
            p-id="6980"
          />
          <path
            d="M493.1 580.7c-2.7 0-5.3-1-7.4-3l-42.6-42.6c-4.1-4.1-4.1-10.7 0-14.7 4.1-4.1 10.7-4.1 14.7 0l42.6 42.6c4.1 4.1 4.1 10.7 0 14.7-2 2-4.7 3-7.3 3z"
            fill="#FE5862"
            p-id="6981"
          />
          <path
            d="M736.4 371.5c-21.6 0-43.1-8.2-59.5-24.6-32.8-32.8-32.8-86.3 0-119.1s86.3-32.8 119.1 0 32.8 86.3 0 119.1c-16.5 16.4-38 24.6-59.6 24.6z m0-140.6c-14.5 0-28.9 5.5-39.9 16.5-22 22-22 57.8 0 79.8s57.8 22 79.8 0 22-57.8 0-79.8c-11-11-25.4-16.5-39.9-16.5z"
            fill="#4586FC"
            p-id="6982"
          />
          <path
            d="M610.276 393.877l66.618-66.6 19.584 19.59-66.618 66.6z"
            fill="#4586FC"
            p-id="6983"
          />
          <path
            d="M693.8 494.8c-3.5 0-7.1-1.4-9.8-4.1l-151-151c-5.4-5.4-5.4-14.2 0-19.6 5.4-5.4 14.2-5.4 19.6 0l151 151c5.4 5.4 5.4 14.2 0 19.6-2.7 2.8-6.3 4.1-9.8 4.1z"
            fill="#4586FC"
            p-id="6984"
          />
          <path
            d="M630.7 491.2L530 390.5l45.8-45.8 100.7 100.7-45.8 45.8z m-71.3-100.7l71.3 71.3 16.4-16.4-71.3-71.3-16.4 16.4z"
            fill="#4586FC"
            p-id="6985"
          />
          <path
            d="M647.6 503.8c-2.7 0-5.3-1-7.4-3L523 383.5c-4.1-4.1-4.1-10.7 0-14.7 4.1-4.1 10.7-4.1 14.7 0L654.9 486c4.1 4.1 4.1 10.7 0 14.7-2 2.1-4.6 3.1-7.3 3.1z"
            fill="#4586FC"
            p-id="6986"
          />
          <path
            d="M378.2 730.2c-17.6 0-34.2-6.8-46.6-19.2l-22.2-22.2c-12.4-12.4-19.2-29-19.2-46.6s6.8-34.2 19.2-46.6l227-227L651.8 484l-227 227c-12.4 12.3-29 19.2-46.6 19.2z m158.2-322.4L329 615.2c-7.2 7.2-11.1 16.7-11.1 27 0 10.2 3.9 19.8 11.1 27l22.2 22.2c7.2 7.2 16.7 11.1 27 11.1 10.2 0 19.8-3.9 27-11.1L612.6 484l-76.2-76.2z"
            fill="#4586FC"
            p-id="6987"
          />
        </svg>
        <svg
          t="1617027906990"
          class="virusIcon2"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5252"
          width="64"
          height="64"
        >
          <path
            d="M518.827 448.853c0 76.8-63.147 139.947-139.947 139.947s-139.947-63.147-139.947-139.947c0-76.8 63.147-139.947 139.947-139.947 76.8-1.707 139.947 61.44 139.947 139.947z m201.386-6.826c-40.96 0-73.387 32.427-71.68 73.387 0 40.96 32.427 73.387 73.387 73.387s73.387-32.427 73.387-73.387c-1.707-40.96-34.133-73.387-75.093-73.387z m-179.2 201.386c-35.84 0-69.973 22.187-83.627 54.613-13.653 34.133-6.827 73.387 18.773 98.987s64.853 34.133 98.987 20.48c34.133-13.653 56.32-46.08 56.32-83.627 0-23.893-10.24-46.08-25.6-63.147-18.773-18.773-40.96-27.307-64.853-27.307z m116.054-322.56c0-13.653-11.947-25.6-25.6-25.6s-25.6 10.24-25.6 25.6c0 13.653 10.24 25.6 23.893 25.6 15.36 0 25.6-11.947 27.307-25.6z m-327.68 397.654c-11.947 0-23.893 6.827-27.307 18.773-5.12 11.947-1.707 23.893 6.827 32.427s22.187 11.947 32.427 6.827c11.947-5.12 18.773-15.36 18.773-27.307 0-8.533-3.413-15.36-8.533-20.48-6.827-8.533-13.653-10.24-22.187-10.24z m102.4-494.934c11.947 0 20.48-10.24 20.48-20.48 0-11.947-8.533-20.48-20.48-20.48s-20.48 8.533-20.48 20.48c0 5.12 1.707 10.24 5.12 13.653 5.12 5.12 10.24 6.827 15.36 6.827z m547.84 249.174c15.36 0 30.72 6.827 37.547 20.48 8.533 13.653 8.533 29.013 0 42.667s-22.187 20.48-37.547 20.48h-44.373c-3.413 42.667-13.653 83.627-30.72 122.88l49.493 29.013h1.707c18.773 11.947 23.893 35.84 13.653 56.32-11.947 18.773-35.84 25.6-54.613 15.36h-1.707L865.28 752.64c-23.893 35.84-54.613 68.267-88.747 95.573l30.72 52.907c11.947 20.48 5.12 44.373-15.36 56.32s-44.373 5.12-56.32-15.36l-29.013-49.493c-49.493 25.6-104.107 42.667-160.427 46.08v44.373c-1.707 22.187-18.773 39.253-40.96 39.253s-39.253-17.067-40.96-39.253v-44.373c-54.613-5.12-107.52-22.187-155.307-47.787l-29.013 51.2c-11.947 20.48-37.547 27.307-56.32 15.36-20.48-11.947-27.307-37.547-15.36-56.32l32.427-56.32c-34.133-27.307-63.147-61.44-87.04-97.28l-47.787 29.013c-11.947 8.533-29.013 8.533-40.96 1.707-13.653-6.827-22.187-22.187-22.187-35.84 0-15.36 8.533-29.013 22.187-35.84l51.2-29.013c-15.36-39.253-25.6-78.507-29.013-121.173H39.253C17.066 554.667 0 535.894 0 513.707s17.067-40.96 39.253-40.96h46.08c5.12-46.08 17.067-90.453 35.84-131.413l-46.08-27.307c-13.653-6.827-22.187-20.48-22.187-35.84s8.533-29.013 22.187-35.84c13.653-6.827 29.013-6.827 42.667 1.707l46.08 27.307c27.307-39.253 63.147-75.093 102.4-102.4l-29.013-49.493c-8.533-11.947-8.533-29.013-1.707-42.667s22.187-22.187 35.84-22.187c15.36 0 29.013 8.533 35.84 22.187l27.307 47.787c40.96-18.773 85.333-30.72 129.707-35.84v-46.08c0-22.187 18.773-40.96 40.96-40.96s40.96 18.773 40.96 40.96v46.08c47.787 3.413 95.573 17.067 138.24 35.84l27.307-47.787v-1.707c6.827-13.653 20.48-22.187 35.84-22.187s29.013 8.533 35.84 22.187c11.947 15.36 10.24 30.72 1.707 44.373l-27.307 47.787c40.96 29.013 75.093 64.853 104.107 105.813l52.907-30.72h1.707c20.48-11.947 44.373-5.12 56.32 15.36s5.12 44.373-15.36 56.32h-1.707l-52.907 30.72c17.067 40.96 29.013 83.627 32.427 128h44.373zM512 894.293c180.907 0 336.213-126.293 372.053-303.787s-58.027-354.987-223.573-424.96c-165.547-69.973-358.4-13.653-460.8 134.827l-29.013 49.493c-56.32 117.76-47.787 256 22.187 365.227 68.267 110.933 187.733 179.2 319.147 179.2z"
            fill="#d4237a"
            p-id="5253"
          />
        </svg>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$route);
  },
  methods:{ 
    goBack() {
        this.$router.go(-1)
      }
  }
};
</script>
<style>
.video-container {
  position: relative;
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
video {
  border: none;
}
.svg-grid {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(100px, auto));
  grid-template-rows: repeat(5, 200px);
}
.virusIcon {
  width: 100%;
  height: 100%;
  grid-column: 1/3;
  grid-row: 1/3;
  animation: linear 5s roate infinite;
}
.virusIcon2 {
  animation: linear 5s roate infinite;
}
@keyframes roate {
  100% {
    transform: rotate(360deg);
  }
}
.page-header{
  padding-left: 2rem; 
  height: 5rem;
  display: flex;
  align-items: center;
  border-bottom:1px solid rgb(243, 234, 234) ;
}
.video-title{ 
  text-align: center;
  font-size: 1.3rem;
  padding: 1rem;
}
.needleIcon {
  grid-column: 6/7;
  grid-row: 1/6;
  width: 100%;
  height: 100%;
  transform: rotate(130deg);
}
</style>